<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#search{
				border: 1px solid red;
				border-radius: 10px;
				height: 40px;
				text-align: center;
				width: 300px;
				/*position: fixed;*/
				margin-left: 50px;
			}
			#search #q{
				width: 140px;
			}
			body{
				height: 10000px;
			}
		</style>
		<script>
			var height=0;
			window.onload=function(){
				var s=document.getElementById("search");
				height=s.offsetTop;
			}
			window.onscroll=function(){
				var s=document.getElementById("search");
				//var h=s.offsetTop;//
				//滚动了多少
				//兼容不同的浏览器
				var top=document.documentElement.scrollTop||document.body.scrollTop;
				//console.log(top+":"+h+":");
				if(top>=height){
					s.style.position="fixed";
					s.style.top="5px";
				}else{
					s.style.position="static";
					s.style.top=height;
				}
			}
		</script>
	</head>
	<body>
		<div id="nav" style="height: 120px;background-color: blue;"></div>
		<div id="search">
			<form>
			<input id="q" type="text" name="q" size="20" />
			<input type="submit" />
			</form>
		</div>
	</body>
</html>
